<template>
  <div id="app">
    <div class="container">
      <div class="left">
        <LeftComponent v-if="personalInfo" :personalInfo="personalInfo"/>
      </div>
      <div class="right">
        <div class="top">
          <TopRightComponent @change-content="changeContent" v-if="personalInfo" :personalInfo="personalInfo"/>
        </div>
        <div class="bottom">
          <component
              :is="currentComponent"
              :content="currentContent"
              :personalInfo="personalInfo"
              :selectedClub="selectedClub"
              @switch-to-leader="switchToLeaderComponent"
              @switch-to-second-leader="switchToSecondLeaderComponent"
              @switch-to-management="switchToManagementComponent"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftComponent from "./LeftComponent.vue";
import TopRightComponent from "./TopRightComponent.vue";
import BottomRightComponent from "./BottomRightComponent.vue";
import LeaderBottomRightComponent from "./LeaderBottomRightComponent.vue";
import SecondLeaderBottomRightComponent from "./SecondLeaderBottomRightComponent.vue";
import axios from 'axios'; // 引入配置好的 Axios 实例
import {ElLoading} from "element-plus";

export default {
  name: "PersonalCenter",
  components: {
    LeftComponent,
    TopRightComponent,
    BottomRightComponent,
    LeaderBottomRightComponent,
    SecondLeaderBottomRightComponent
  },
  data() {
    return {
      currentContent: "default", // 用于控制右下区域的显示内容
      currentComponent: "BottomRightComponent", // 用于控制当前组件
      selectedClub: null,
      personalInfo: null
    };
  },
  created() {
    this.fetchPersonalInfo();
  },
  methods: {
    fetchPersonalInfo() {

      const isLoading=ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      let params = {
        footprintPageNum: 1
      };
      axios.get("/user/personalCenter", {params})
          .then(response => {
            if (response.data.code === 0) {
              this.personalInfo = response.data.data;
            } else {
              console.error("Failed to fetch personal info:", response.data.message);
            }

            isLoading.close()
          })
          .catch(error => {
            console.error("Error fetching personal info:", error);
            isLoading.close()
          });
    },
    changeContent(content) {
      this.currentContent = content;
      this.currentComponent = "BottomRightComponent";
    },
    switchToLeaderComponent(selectedClub) {
      this.selectedClub = selectedClub;
      this.currentComponent = "LeaderBottomRightComponent";
    },
    switchToSecondLeaderComponent(selectedClub) {
      this.selectedClub = selectedClub;
      this.currentComponent = "SecondLeaderBottomRightComponent";
    },
    switchToManagementComponent() {
      this.currentContent="management";
      this.currentComponent = "BottomRightComponent";
    }
  }
};
</script>

<style scoped>
#app {
  background-color: #FFE7C7;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.container {
  display: flex;
  height: calc(100vh - 30px);
  gap: 20px; /* 增加了容器之间的间隔 */
  max-width: 1400px;
  margin: 0 auto;
}

.left {
  flex: 1;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: auto;
}

.right {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px; /* 增加了上下容器之间的间隔 */
}

.top {
  flex: 1;
  height: 50vh;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: auto;
}

.bottom {
  flex: 3;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: auto;
}

@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    height: auto;
    gap: 15px; /* 在小屏幕上稍微减小间隔 */
  }

  .left, .right {
    width: 100%;
  }

  .left {
    height: 35vh;
  }

  .top {
    height: 18vh;
  }

  .bottom {
    height: 35vh;
  }

  .right {
    gap: 15px; /* 在小屏幕上稍微减小上下容器之间的间隔 */
  }
}
</style>
